<template>
    <div class="hireposition_body">
        <el-button class="add_position" type="primary" @click="dialogFormVisible = true">+新增招聘</el-button>
        <el-dialog title="新增岗位" :visible.sync="dialogFormVisible">
            <el-form :model="form" :rules="rules" ref="form">
                <el-form-item label="职位名称" :label-width="formLabelWidth" prop="recruitName">
                    <el-input v-model="form.recruitName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="职位描述" :label-width="formLabelWidth" prop="descriptions">
                    <el-input v-model="form.descriptions" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="学历要求" :label-width="formLabelWidth" prop="education">
                    <el-input v-model="form.education" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="薪资" :label-width="formLabelWidth" prop="wage">
                    <el-input v-model="form.wage" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="工作活动1" :label-width="formLabelWidth" prop="workAction1">
                    <el-input v-model="form.workAction1" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="工作活动2" :label-width="formLabelWidth" prop="workAction2">
                    <el-input v-model="form.workAction2" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="福利" :label-width="formLabelWidth" prop="welfare">
                    <el-input v-model="form.welfare" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="工作需求" :label-width="formLabelWidth" prop="requires">
                    <el-input v-model="form.requires" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="能力需求" :label-width="formLabelWidth" prop="responsibility">
                    <el-input v-model="form.responsibility" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitAddition">确 定</el-button>
            </div>
        </el-dialog>

        <div v-for="item in recruit" :key="item.recruitId" class="Company-item" @click.stop="toJobDetails(item.recruitId)">
            <el-button icon="el-icon-delete" class="delete_button"
                @click.stop="delete_position(item.recruitId)"></el-button>
            <el-button icon="el-icon-edit" class="edit_button"></el-button>
            <div class="position">{{ item.recruitName }}</div>
            <div class="salary">{{ item.wage }}</div>
            <div class="education">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-xueshimao"></use>
                </svg>
                {{ item.education }}
            </div>
            <div class="activity_1">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-caidan"></use>
                </svg>
                {{ item.workAction1 }}
            </div>
            <div class="activity_2">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-caidan"></use>
                </svg>
                {{ item.workAction2 }}
            </div>
            <div class="name">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-loufang"></use>
                </svg>
                {{ company.companyName }}
            </div>
            <div class="type">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-gongwenbao"></use>
                </svg>
                {{ company.companyType }}
            </div>
            <div class="city">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-loufang1"></use>
                </svg>
                {{ company.companyCity }}
            </div>
        </div>
        <div class="page">
            <el-pagination layout="prev, pager, next" :total="700" :current-page="currentPage"
                @current-change="handlePageChange">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import axios from 'D:\\job_management\\src\\axiosConfig.js'
export default {

    data() {
        return {
            needPage: 1,
            currentPage: 1,
            recruit: [
                {
                    recruitId: 1,
                    companyAccount: 1,
                    recruitName: '前端开发工程师',
                    recruitSalary: '10k-20k',
                    education: '本科',
                    workAction1: '五险一金',
                    workAction2: '带薪年假',
                    welfare: '五险一金，带薪年假，节日福利',
                    requires: '1.本科及以上学历，计算机相关专业，3年以上前端开发经验；2.熟练掌握HTML、CSS、JavaScript等前端技术，熟悉W3C标准，熟悉HTML5、CSS3、ES6等新技术；3.熟悉Vue、React、Angular等主流前端框架，熟悉Node.js、Webpack等前端工具；4.熟悉前端性能优化，熟悉前端安全防范；5.熟悉前端自动化测试，熟悉前端工程化；6.熟悉跨终端、跨浏览器的前端开发；7.具备良好的沟通能力和团队合作精神，有较强的学习能力和适应能力；8.有大型互联网公司工作经验者优先。',
                    responsibility: '1.负责公司产品前端开发；2.负责公司产品前端性能优化；3.负责公司产品前端安全防范；4.负责公司产品前端自动化测试；5.负责公司产品前端工程化；6.负责公司产品跨终端、跨浏览器的前端开发。',
                    descriptions: '描述'

                },
                {
                    recruitId: 2,
                    companyAccount: 1,
                    recruitName: '前端开发工程师',
                    recruitSalary: '10k-20k',
                    education: '本科',
                    workAction1: '五险一金',
                    workAction2: '带薪年假',
                    welfare: '五险一金，带薪年假，节日福利',
                    requires: '1.本科及以上学历，计算机相关专业，3年以上前端开发经验；2.熟练掌握HTML、CSS、JavaScript等前端技术，熟悉W3C标准，熟悉HTML5、CSS3、ES6等新技术；3.熟悉Vue、React、Angular等主流前端框架，熟悉Node.js、Webpack等前端工具；4.熟悉前端性能优化，熟悉前端安全防范；5.熟悉前端自动化测试，熟悉前端工程化；6.熟悉跨终端、跨浏览器的前端开发；7.具备良好的沟通能力和团队合作精神，有较强的学习能力和适应能力；8.有大型互联网公司工作经验者优先。',
                    responsibility: '1.负责公司产品前端开发；2.负责公司产品前端性能优化；3.负责公司产品前端安全防范；4.负责公司产品前端自动化测试；5.负责公司产品前端工程化；6.负责公司产品跨终端、跨浏览器的前端开发。',
                    descriptions: '描述'

                },
                {
                    recruitId: 3,
                    companyAccount: 1,
                    recruitName: '前端开发工程师',
                    recruitSalary: '10k-20k',
                    education: '本科',
                    workAction1: '五险一金',
                    workAction2: '带薪年假',
                    welfare: '五险一金，带薪年假，节日福利',
                    requires: '1.本科及以上学历，计算机相关专业，3年以上前端开发经验；2.熟练掌握HTML、CSS、JavaScript等前端技术，熟悉W3C标准，熟悉HTML5、CSS3、ES6等新技术；3.熟悉Vue、React、Angular等主流前端框架，熟悉Node.js、Webpack等前端工具；4.熟悉前端性能优化，熟悉前端安全防范；5.熟悉前端自动化测试，熟悉前端工程化；6.熟悉跨终端、跨浏览器的前端开发；7.具备良好的沟通能力和团队合作精神，有较强的学习能力和适应能力；8.有大型互联网公司工作经验者优先。',
                    responsibility: '1.负责公司产品前端开发；2.负责公司产品前端性能优化；3.负责公司产品前端安全防范；4.负责公司产品前端自动化测试；5.负责公司产品前端工程化；6.负责公司产品跨终端、跨浏览器的前端开发。',
                    descriptions: '描述'

                }
            ],
            company: {
                account: 1,
                companyName: '腾讯',
                companyCity: '深圳',
                companyType: '互联网',
                companyAddress: '深圳市南山区科技园',
                Introduce: '腾讯公司成立于1998年11月，是目前中国领先的互联网增值服务提供商之一。'
            },
            dialogFormVisible: false,
            form: {
                recruitName: '',
                wage: '',
                education: '',
                workAction1: '',
                workAction2: '',
                welfare: '',
                requires: '',
                responsibility: '',
                descriptions: ''
            },
            formLabelWidth: '120px',
            rules: {
                recruitName: [
                    { required: true, message: '请输入职位名称', trigger: 'blur' },
                ],
                descriptions: [
                    { required: true, message: '请输入职位描述', trigger: 'blur' },
                ],
                education: [
                    { required: true, message: '请输入学历要求', trigger: 'blur' },
                ],
                wage: [
                    { required: true, message: '请输入薪资', trigger: 'blur' },
                ],
                workAction1: [
                    { required: true, message: '请输入工作活动1', trigger: 'blur' },
                ],
                workAction2: [
                    { required: true, message: '请输入工作活动2', trigger: 'blur' },
                ],
                welfare: [
                    { required: true, message: '请输入福利', trigger: 'blur' },
                ],
                requires: [
                    { required: true, message: '请输入工作需求', trigger: 'blur' },
                ],
                responsibility: [
                    { required: true, message: '请输入能力需求', trigger: 'blur' },
                ],
            },

        }
    },
    mounted() {
        axios.post(`company/recruit/get`,
            {

                account: this.$store.state.companyAccount,
                pageSize: 4,
                pageNum: this.needPage,

            }
        ).then(res => {
            this.recruit = res.data.data.recruit
            this.company = res.data.data.company
        })
    },

    methods: {
        toJobDetails(Id) {
            this.$store.commit('ChangeIsSeekerToCompany')
            this.$store.commit('updateRecruitId', Id)
            this.$router.push('JobDetails')
        },
        delete_position(index) {
            //此处只需要将点击的recruitId传给后端，后端删除后返回一个新的数组
            axios.post(`company/recruit/post`,
                {
                    recruitId: index
                }
            ).then(res => {
                axios.post(`company/recruit/get`,
                    {

                        account: this.$store.state.companyAccount,
                        pageSize: 4,
                        pageNum: this.needPage,

                    }
                ).then(res => {
                    this.recruit = res.data.data.recruit
                    this.company = res.data.data.company
                })
            })
        },
        submitAddition() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    //此处将表单数据传给后端，后端将数据存入数据库
                    axios.post('company/recruitdetail',
                        {
                            companyAccount: this.$store.state.companyAccount,
                            recruitName: this.form.recruitName,
                            wage: this.form.wage,
                            education: this.form.education,
                            workAction1: this.form.workAction1,
                            workAction2: this.form.workAction2,
                            welfare: this.form.welfare,
                            requires: this.form.requires,
                            responsibility: this.form.responsibility,
                            descriptions: this.form.descriptions

                        }).then(res => {
                            console.log(this.form);
                            this.dialogFormVisible = false
                            axios.post(`company/recruit/get`,
                                {

                                    account: this.$store.state.companyAccount,
                                    pageSize: 4,
                                    pageNum: this.needPage,

                                }
                            ).then(res => {
                                console.log(res);
                                this.recruit = res.data.data.recruit
                            })
                        })

                } else {
                    return false;
                }
            });
        },
        handlePageChange(currentPage) {
            this.needPage = currentPage;

            axios.post(`/company/recruit/get`,
                {

                    account: this.$store.state.companyAccount,
                    pageSize: 4,
                    pageNum: this.needPage

                },

            )
                .then(response => {

                    this.recruit = response.data.data.recruit;
                })
                .catch(error => {
                    console.log(error);
                })
        }
    }
}


</script>
<style scoped>
.icon {
    width: 4em;
    height: 4em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
    font-size: 7px;
}



.add_position {
    position: absolute;
    top: 150px;
    right: 20px;
}

.Company-item {
    position: relative;
    width: 75%;
    height: 200px;
    background-color: #fff;
    margin-top: 20px;
    margin-left: 200px;
    border-radius: 30px;
    cursor: pointer;
    transition: box-shadow 0.5s ease-in-out;
}

.Company-item:hover {

    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.1);
}

.Company-item:hover .position {
    color: rgb(0, 180, 179);
}

.delete_button {
    position: absolute;
    top: 10px;
    right: 100px;
}

.edit_button {
    position: absolute;
    top: 10px;
    right: 10px;
}

.position {
    position: absolute;
    left: 40px;
    font-weight: 700;
    font-size: 22px;
    transition: color, 0.2s ease-in-out;
}

.salary {
    position: absolute;
    top: 5px;
    left: 200px;
    font-weight: 600;
    color: #ff0000;
    font-size: 20px;
}

.education {
    position: absolute;
    top: 60px;
    left: 50px;
}

.activity_1 {
    position: absolute;
    top: 60px;
    left: 200px;

}

.activity_2 {
    position: absolute;
    top: 60px;
    left: 420px;
}

.name {
    position: absolute;
    top: 120px;
    left: 50px;
}

.type {
    position: absolute;
    top: 120px;
    left: 420px;
}

.city {
    position: absolute;
    top: 120px;
    left: 650px;
}

.page {
    margin-top: 30px;
}
</style>